<template>
   <view class="">
	<view class="ui-car-select"  v-if="carinfos.length>0">
		<view class="ui-car-name-list">
			<view class="ui-car-name-item" v-for="(item,index) in carTypes" :class="current==index?'border_bottom active':''" :data-current="index" @tap="tabChange">{{item.name}}</view>
		</view>
		<view>
			<swiper class="ui-carinfos" @change="swiperChange" :current="current" >
				<swiper-item class="ui-carinfo-item" v-for="(item,index) in carinfos">
					<scroll-view>
					<view class="itembox list1" v-for="(list,index) in item.array">
						<view>
							<img :src="list.img" />
						</view>
						<view class="right">
							<view class="name">{{list.name}} <view class="right">剩余：14:18</view></view>
							<view class="text">设计师：{{list.tony}}</view>
							<view class="bottom">
								<view class="price">
									￥{{list.price}}
									<view class="s">￥{{list.price1}}</view>
								</view>
								<view class="service_num">
									<view v-if="list.state==1">未付款{{list.num}}</view>
									<view v-if="list.state==2">已预约{{list.num}}</view>
									<view v-if="list.state==3">已完成{{list.num}}</view>
									<view><img src="../../static/img/common_icon/next.png" /></view>
								</view>
							</view>
						</view>
					</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>	
	<view class="nullbox" v-else>
		 <view class="content">
			 <image src="../../static/img/common_icon/mineOrder.png" mode=""></image>
			 <view class="title">亲还没有预约Tony老师哦～</view>
		 </view>
	</view>
 </view>
</template>

<script>
	export default{
		data() {
			return {
				visible: false,
				current:0,
				carTypes:[
					{
						name: "全部"
					},
					{
						name: "未付款"
					},
					{
						name: "已预约"
					},
					{
						name: "已完成"
					}],
				carinfos:[
					{
					carinfo:"小面包",
					array:[
						{
							img: "../../static/img/index_service.png",
							name: "烫发",
							tony: "Tony",
							price: 269,
							price1: 739,
							num: 100,
							state:1
						}
					]
					},{
						carinfo:"中面包",
						array:[
							{
								img: "../../static/img/index_service.png",
								name: "烫发",
								tony: "Tony",
								price: 269,
								price1: 739,
								num: 100,
								state:1
							}
						]
					},{
						carinfo:"小货车",
						array:[
							{
								img: "../../static/img/index_service.png",
								name: "烫发",
								tony: "Tony",
								price: 269,
								price1: 739,
								num: 100,
								state:2
							},
							{
								img: "../../static/img/index_service.png",
								name: "烫发",
								tony: "Tony",
								price: 269,
								price1: 739,
								num: 100,
								state:2
							},
							{
								img: "../../static/img/index_service.png",
								name: "烫发",
								tony: "Tony",
								price: 269,
								price1: 739,
								num: 100,
								state:2
							},
							{
								img: "../../static/img/index_service.png",
								name: "烫发",
								tony: "Tony",
								price: 269,
								price1: 739,
								num: 100,
								state:2
							},
							{
								img: "../../static/img/index_service.png",
								name: "烫发",
								tony: "Tony",
								price: 269,
								price1: 739,
								num: 100,
								state:2
							},
							{
								img: "../../static/img/index_service.png",
								name: "烫发",
								tony: "Tony",
								price: 269,
								price1: 739,
								num: 100,
								state:2
							},
							{
								img: "../../static/img/index_service.png",
								name: "烫发",
								tony: "Tony",
								price: 269,
								price1: 739,
								num: 100,
								state:2
							},
							{
								img: "../../static/img/index_service.png",
								name: "烫发",
								tony: "Tony",
								price: 269,
								price1: 739,
								num: 100,
								state:2
							}
						]
					},{
						carinfo:"中货车",
						array:[
							{
								img: "../../static/img/index_service.png",
								name: "烫发",
								tony: "Tony",
								price: 269,
								price1: 739,
								num: 100,
								state:3
							}
						]
				}
					]
			}
		},
		methods:{
			tabChange:function(e){
				var index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.current=index;
			},
			swiperChange:function(e) {	
				var index=e.target.current || e.detail.current;
				this.current = index;
			},
		}
	}
</script>

<style scoped>
	swiper{
		height: 100vh;
		overflow: scroll;
	}
	.ui-car-name-list{
		display: flex;
		height: 68rpx;
		line-height: 68rpx;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
		justify-content:space-between;
		padding: 0 40rpx;
		background: white;
	}
	.ui-car-name-item{
		text-align: center;
	}
	.ui-carinfos{
		margin: 0 40rpx;
	}
	.ui-carinfos .ui-carinfo-item{
		font-size: 140rpx;
		margin-top: 0rpx;
		overflow: scroll;
	}
	.ui-carinfo-item {
		/* display: flex; */
		justify-content: space-between;
		margin-top: 20rpx;
	}
	.ui-carinfo-item .itembox{
		padding: 32rpx;
		display: flex;
		/* width: 100%; */
		justify-content: space-between;
		height: 160rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 40rpx;
		margin-top: 20rpx;
		box-shadow: 0rpx 2rpx 6rpx rgba(0, 0, 0, 0.06);
	}
	.ui-carinfo-item img {
		width: 160rpx;
		height: 160rpx;
	}
	
	.ui-carinfo-item .right {
		display: flex;
		/* justify-content: space-between; */
		flex-direction: column;
		margin-left: 32rpx;
		flex: 1;
	}
	
	.ui-carinfo-item .right .name {
		font-size: 32rpx;
		font-weight: 500;
		line-height: 44rpx;
		color: rgba(51, 51, 51, 1);
	}
	
	.ui-carinfo-item .right .text {
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
		color: rgba(153, 153, 153, 1);
		margin-bottom: 38rpx;
	}
	
	.ui-carinfo-item .right .bottom {
		display: flex;
		justify-content: space-between;
	
	}
	
	.ui-carinfo-item .right .price {
		font-size: 32rpx;
		font-weight: bold;
		line-height: 38rpx;
		color: rgba(229, 109, 34, 1);
	}
	
	.ui-carinfo-item .right .price .s {
		font-size: 20rpx;
		font-weight: 400;
		line-height: 28rpx;
		color: rgba(102, 102, 102, 1);
		text-decoration: line-through;
		display: inline-block;
		margin-left: 16rpx;
	}
	
	.ui-carinfo-item .right .service_num {
		display: flex;
		justify-content: space-between;
		width: 142rpx;
		height: 28rpx;
		background: rgba(13, 104, 102, 1);
		border-radius: 20rpx;
		color: #fff;
		font-size: 20rpx;
		font-weight: 500;
		line-height: 28rpx;
		padding: 6rpx 4rpx 6rpx 14rpx;
	}
	
	.ui-carinfo-item .right .service_num img {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		background-color: #fff;
	}
	.ui-carinfo-item .right .name:after { clear:both;content:'';display:block;width:0;height:0;visibility:hidden; }
	.ui-carinfo-item .right .name .right{
		float: right;
		font-size:20rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);
	}
	.nullbox{
	    width: 100%;
	    height: 100vh;
	    margin: 0;
	    padding: 0;
		text-align: center;
	}
	.nullbox .content {
	    width: 300px;
	    height: 300px;
	    margin: 0 auto; /*水平居中*/
	    position: relative;
	    top: 50%; /*偏移*/
	    margin-top: -150px; 
	}
	.nullbox .content image{
		width: 400rpx;
		height: 400rpx;
	}
	.nullbox .content .title{
		margin-top: 100rpx;
		font-size:20rpx;
		font-family:PingFang SC;
		font-weight:400;
		line-height:28rpx;
		color:rgba(153,153,153,1);
	}
</style>
